<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>姓名</title>

		<link rel="stylesheet" type="text/css" href="../css/aui.css"/>
        <link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<style>
			body {
				background-color: #f2f2f2;
			}
			.aui-bar {
				background-color: #6ac82c;
			}
			.input {
				margin : 15px 0;
				background-color: #fff;
				padding: 12px 20px;
				border-top: 1px solid #dfdfdf;
				border-bottom: 1px solid #eaeaea;
                position: relative;
			}
			.input input {
				margin: 0;
				padding: 0;
				border: none;
				outline: none;
				line-height: 22px;
			}
            .search-out{position: absolute;left: 0;top: 50px;width: 100%;}
            .search-out li{line-height: 40px;background-color: #ffffff;width: 100%;padding: 0 20px;}
            .search-out li:hover{background-color: #ccc;}
		</style>
	</head>
	<body>
    <div id="top-div"></div>
		<header id="header" class="aui-bar aui-bar-nav">
			<a href="../html/infor_setting.html" class="aui-pull-left"> <span class="aui-iconfont aui-icon-left"></span> </a>
			<div id="header-title" class="aui-title">
				姓名
			</div>
		</header>
		<div class="input">
			<input id="tid" type="text" placeholder="id"/>
		</div>
		<div style="display: none;" class="input">
			<input id="firstname" type="text" placeholder="firstname"/>
		</div>
		<div style="display: none;" class="input">
			<input id="lastname" type="text" placeholder="lastname"/>
		</div>
    <div class="aui-btn aui-btn-danger" onclick="mySubmit()">
        提交
    </div>
    <div style="display: none;" class="aui-btn aui-badge-success" onclick="select()">
        搜索
    </div>
    <div class="input title-search">
        <input id="search" type="text" placeholder="试试搜索数字"/>
        <ul class="search-out">
        </ul>
    </div>
    <form style="display: none;" action="../php/upfile.php" method="post" enctype="multipart/form-data">
        <input type="file" name="test_file" id="file"/>
        <input style="color: red;background-color: royalblue;" type="submit" value="上传"/>
    </form>
    <ul class="aui-user-view">
    </ul>
	</body>
	<script src="../script/jquery-1.8.3.min.js"></script>
	<script>
		$(function(){

        });
//		function select(){
//            var search = $('#search').val().trim();
//			$.ajax({
//				url:"../php/select.php",
//				type:"post",
//                data:{
//                    search:search
//                },
//				success:function(data){
//                    $('.aui-user-view').html("");
//                    var html="";
//                    for(var i=0;i<data.length;i++){
//                          html+='<li class="aui-user-view-cell aui-img">'+
//                                    '<img class="aui-img-object aui-pull-left" src="../image/img8.png">'+
//                                    '<div class="aui-img-body">'+
//                                        '<span>'+data[i].firstname+'<em>'+data[i].t_id+'</em></span>'+
//                                        '<p class="aui-ellipsis-1">'+data[i].lastname+'</p>'+
//                                    '</div>'+
//                                '</li>'
//                    }
//                    $('.aui-user-view').append(html);
//				}
//			})
//		}
        $('.title-search input').keyup(function(){
            var search_box = $('.search-out');
            var search = $('#search').val().trim();
            if(search == "" || search == null){
                search_box.html("");
                return
            }
            $.ajax({
                url:'../php/select.php',
                type:"post",
                data:{
                    'search':search
                },
                success:function(data){
                    search_box.html("");
                    var html="";
                    for(var i=0;i<data.length;i++){
                        html+='<li>'+data[i].t_id+'</li>'
                    }
                    search_box.append(html);
                    search_box.find('li').on('click',function(){
                        var suggest = $(this).html();
                        $("#search").val(suggest);
                        search_box.html("");
                    })
                }
            })
        });
        $('.title-search input').blur(function(){
            setTimeout(function(){
                $('.search-out').html("");
            },100)
        });
        function mySubmit(){
            var tid = $("#tid").val();
            var firstname = $("#firstname").val();
            var lastname = $("#lastname").val();
            $.ajax({
                url:"../php/index.php",
                type:"post",
                data:{
					'tid':tid,
					'firstname':firstname,
					'lastname':lastname
				},
                success:function(data){
                    alert("提交成功，返回数据："+data);
                },
                error:function(data){
                    alert("失败："+JSON.stringify(data));
                }
            })
        }
	</script>
    <script>
        $('#Pid').keyup(function(){
            var search_box = $('#search-out');
            var search = $(this).val().trim();
            if(search == "" || search == null){
                search_box.html("").hide();
                return;
            }
            $.ajax({
                url:"/malladmin/promotion/getpidtips",
                type:"post",
                data:{
                    'pidTips':search,
                    'pageSize':15,
                    'pageNumber':1
                },
                success:function(data){
                    search_box.html("").show();
                    var html="";
                    for(var i=0;i<data.length;i++){
                        html+='<div>'+data[i].Name+'('+data[i].Pid+')'+'</div>'
                    }
                    search_box.append(html);
                    search_box.find('div').on('click',function(){
                        var suggest = $(this).html();
                        $('#Pid').val(suggest);
                        search_box.html("").hide();
                    })
                }
            })
        }).blur(function(){
            setTimeout(function(){
                $('#search-out').html("").hide();
            },100)
        });

    </script>

</html>